{% extends "layout.html" %}


{% block body %}
<style>
.required::after {content: " *";font-weight: bold;color: red;}
#ui-id-1 {max-height: 400px; overflow-y: scroll;}
#organisation.parsley-success {
  color: inherit;
  background-color: inherit;
  border: 1px solid #ccc;
}

</style>
{{ txt }}
<div style="margin-left: 50px;width: 600px;">
  <h3>创建一个EcoTaxa账号</h3>
<form method="post" action="?"  id="MainForm">
<table>
  <tr><td><label for="firstname" class="required">姓名</label></td>
    <!-- <td><label for="lastname" class="required">姓</label></td> -->
  </tr>
  <tr><td style="padding-right: 10px"><input class="form-control" id="firstname" name="firstname" placeholder="John" required></td>
    <!-- <td><input class="form-control" id="lastname" name="lastname" placeholder="Doe" required></td></tr> -->

  <tr><td colspan="2"><label for="email" class="required">邮箱地址</label></td></tr>
  <tr><td colspan="2"><input type="email" class="form-control" id="email" name="email" placeholder="john.doe@foo.edu" required></td></tr>

  <tr><td><label for="password" class="required">密码</label></td><td><label for="passwordconfirm" class="required">密码确认</label></td></tr>
  <tr><td style="padding-right: 10px"><input type="password" class="form-control" id="password" name="password" placeholder="" required minlength="6"></td>
    <td><input type="password" class="form-control" id="passwordconfirm" name="passwordconfirm" placeholder="" required data-parsley-equalto="#password"></td></tr>

  <tr><td colspan="2"><p style="font-size: small;line-height: 1;"><b>警告</b>: 出于性能原因，此服务器不使用加密通信（https）。 <br>这意味着你的密码可能被第三方窃取。请注意您在这里使用的密码。</p></td></tr>

  <tr><td colspan="2"><label for="organisation" class="required">单位</label></td></tr>
  <tr><td colspan="2">
  <div class="input-group" style="width: 100%">
    <input class="form-control" id="organisation" name="organisation" placeholder="从列表中选取或输入新的单位" autocomplete="off" required data-parsley-errors-container="#OrgaError">
      <span class="input-group-btn" >
        <button class="btn btn-default" type="button" id="orgabtn" tabindex="-1" style="height: 34px;"><span class="fas fa-caret-down"></span></button>
      </span>
  </div>
    <div id="OrgaError"></div>
  </td></tr>

<tr><td colspan="2"><label for="country" class="required">国家</label></td></tr>
  <tr><td colspan="2">
  <select class="form-control" id="country" name="country" required data-parsley-errors-container="#CountryError"></select>
  <div id="CountryError"></div>
  </td></tr>

<tr><td colspan="2"><label for="usercreationreason" style="font-weight: normal">对EcoTaxa的使用计划</label></td></tr>
  <tr><td colspan="2">
  <textarea class="form-control" id="usercreationreason" name="usercreationreason" rows="3"></textarea>
  </td></tr>

<tr><td colspan="2">
  <input type="checkbox" id=agree name="agree" required data-parsley-errors-container="#CBError">
  <label for="agree" style="vertical-align: top" class="required"> 我同意以下使用条款:</label>
  <p style="font-size: small;line-height: 1;">- 我会合理利用这个系统的资源。
    <br>- 我接受我的分类活动和统计信息被记录，并与我参与的项目中的成员和EcoTaxa团队共享，以使本程序正常运行。
</p>
  <div id="CBError"></div>
  <span class="required"> </span> 必填字段

</td></tr>

</table>
<input type='hidden' name='g-recaptcha-response' id='g-recaptcha-response' value=''>

  <button type="submit" class="btn btn-success"><span class="fas fa-check"></span> 创建</button>
<a href="/" class="btn btn-default">取消</a>

</form>
<div id="PostResult" style="margin: 20px 50px "></div>

<p style="margin-top: 10px">若此注册页面出现问题，请给以下人员发送邮件以便为您创建帐户: </p>
				
{{ GetAppManagerMailto()|safe }}
        

</div>

<script src="/static/parsley.min.js"></script>
<script>
$('#country').select2({
  ajax: {url:"/ajaxcoutrylist", dataType: 'json'}
});
$("#country").change(function() {
  $("#country").trigger('input')
});

$( function() {
    $( "#organisation" ).autocomplete({
      source: '/ajaxorganisationlist'
      ,minLength: 0
      ,close:function (event,ui) {
{#        $("#country").focus();#}
        $( "#organisation" ).parsley().validate()
      }

    });
  } );

$('#orgabtn').click(function () {
  var input=$( "#organisation" );
  var wasOpen = input.autocomplete( "widget" ).is( ":visible" );
  // Close if already visible
  if ( wasOpen ) {
    return;
  }
  input.autocomplete( "search", "" );
});
$(document).click(function () {
  var input=$( "#organisation" );
  var wasOpen = input.autocomplete( "widget" ).is( ":visible" );
  // Close if already visible
  if ( wasOpen ) {
    input.autocomplete( "close" );
    return;
  }
});


$("#organisation").change(function() {
  $("#organisation").trigger('input')
});

$(function () {
  $('#MainForm').parsley();
  $('#MainForm').submit(function(e){
          e.preventDefault();
          $('#MainForm').parsley().validate();
          $("#PostResult").html("<img src='/static/spinningred.gif'>");
          var formobj=objectifyForm("MainForm");
          $("#PostResult").load('/dologincreate',formobj);
        });

});


</script>

  {% if g.reCaptchaID %}
<script src='https://www.google.com/recaptcha/api.js?render={{ g.reCaptchaID }}'></script>
<script>
function runrecaptcha(){
  grecaptcha.execute('{{ g.reCaptchaID }}', {action: 'createuser'})
  .then(function(token) {
  // Verify the token on the server.
  document.getElementById('g-recaptcha-response').value=token;
  });
}
grecaptcha.ready(runrecaptcha);

</script>
{% endif %}

{% endblock %}